<template>
	<div class="moblieLigin">
		<div class="header">
			<img src="/assets/image/mobile/login/lefti.png" @click="goback()"></img>
			<img class="imgright" src="/assets/image/mobile/login/Component 35@2x.png" alt />
		</div>
		<div style="margin-top: 3.75rem;">
			<div style="display: flex;align-items: inherit;">
				<div style="font-size:2rem;font-weight: bold;">{{ codeTitle }}</div>
			</div>
			<div style="font-size: 1rem;margin-top:.875rem;color: #333333;">{{ codexiu }}</div>
			<div class="Slidermidele">
				<div style="width: 50%; text-align: center; color: aliceblue;height: 2.75rem;display: flex;align-items: center;justify-content: center;"
					@click="clickType(1)">
					<img v-if="codeType != 1" src="/assets/image/mobile/login/greyIconA@2x.png" alt
						style="width:2rem; height:2rem;  z-index: 99;line-height: 2.75rem;" />
					<img v-if="codeType == 1" src="/assets/image/mobile/login/selectedBar@2x.png" alt
						style="width:90%; height:90%;  z-index: 99;" />
				</div>
				<div style="width: 50%; text-align: center; color: aliceblue;height: 2.75rem;display: flex;align-items: center;justify-content: center;"
					@click="clickType(2)">
					<img v-if="codeType == 2 || codeType == 3" src="/assets/image/mobile/login/selectedBar@2x (1).png"
						alt style="width:90%; height:90%;  z-index: 99;" />
					<img v-if="codeType == 1" src="/assets/image/mobile/login/greyIconB@2x.png" alt
						style="width:2rem; height:2rem;   z-index: 99;line-height: 2.75rem;" />
				</div>
			</div>
			<div v-if="codeType == 1">
				<div style="margin-top: 2.5rem;">
					<div style="height: 3.625rem;display: flex;">
						<div style="width: 18%;">
							<img src="/assets/image/mobile/login/icon@2x.png" alt=""
								style="width: 2rem;height:2rem ;" />
						</div>
						<div>
							<div style="font-size: 1.125rem;font-weight: bold;">手机号</div>
							<div class="iphoneInputmiddle" style="">
								<input type="text" style="border: none;" placeholder="请输入您的手机号"
									v-model="loginForm.phone" @input="checkPhoneNumber" @blur="() => {
					validatePhone();
				}
				" />
							</div>
							<div v-if="phonecode == false" style="color: #B3242F;margin: .3125rem 0;">请输入正确的手机号</div>
						</div>
					</div>
				</div>
				<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/codes.png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="display: flex;">
        						<div style="font-size: 1.125rem;font-weight: bold;">验证码</div>
        						<div></div>
        						</div>
        						<div class="iphoneInputmiddle" style="justify-content: space-between;">
        							<input type="text" style="border: none;width: 50%;" placeholder="请输入验证码" v-model="loginForm.code" />
        							<div style="color: #C8C9CC;font-size: 1rem;cursor: pointer;"  @click="getCode()">>{{codeyan}}<</div>
        						</div>
        					</div>
        				</div>
        			</div>
					<div style="display: flex;align-items: center;margin-top: 2.5rem;margin-left:1.575rem;" @click="goxieyi()">
					 <img  v-if="codexieyi==true"  src="/assets/image/mobile/login/Frame 1000006895@2x.png" alt="" style="width: 1rem;height: 1rem;" />
					 <img  v-if="codexieyi==false" src="/assets/image/mobile/login/Frame 1000006718@2x.png" alt="" style="width: 1rem;height: 1rem;" />
        			 <div style="margin-left: .3125rem;font-size: .875rem;">我已阅读并同意 <a href="" style="color: #2E3033;margin-left:.1875rem;font-weight: bold;font-size: .875rem;">《AISEO注册&使用协议》</a></div>
        		 </div>	
			</div>
		</div>
		<div  v-if="codeType==2">
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/icon@2x.png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="font-size: 1.125rem;font-weight: bold;">手机号</div>
        						<div class="iphoneInputmiddle" style="">
        							<input type="text" style="border: none;" placeholder="请输入您的手机号" v-model="loginForm.phone"  @input="checkPhoneNumber"
									@blur="
									  () => {
									    validatePhone();
									  }
									"/>
        						</div>
								<div v-if="phonecode==false" style="color: #B3242F;margin: .3125rem 0;">请输入正确的手机号</div>
        					</div>
        				</div>
        			</div>
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/icon@2x (2).png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="display: flex;">
        						<div style="font-size: 1.125rem;font-weight: bold;">密码</div>
        						<div style="color: #808080;cursor: pointer;" @click="forgetthepassword()">*忘记密码?</div>
        						</div>
        						<div class="iphoneInputmiddle" style="justify-content: space-between;">
        							<input  :type="isPasswordVisible ? 'text' : 'password'"   style="border: none;width: 60%;" placeholder="请输入密码" v-model="loginForm.password"
									 @blur="
									   () => {
									     validatepassword();
									   }
									 "
									 />
        							<img src="/assets/image/mobile/login/icon@2x (1).png" alt="" style="width: 1.25rem;height:1.25rem;cursor: pointer;"    @click="togglePasswordVisibility()" />
        						</div>
								<div v-if="password==false" style="color: #B3242F;margin: .3125rem 0;">请输入密码</div>
								
								<div style="padding: 1rem 0;cursor: pointer;" 
                                 @click="remberzhu()">
								  <img  v-show="Remember==true" src="/assets/image/mobile/login/Component 28@2x.png" alt="" style="width: 6rem;height: 1.6875rem;" />
								  <img  v-show="Remember==false" src="/assets/image/mobile/login/Component 36@2x.png" alt="" style="width: 6rem;height: 1.6875rem;" />
								</div>
        					</div>
        				</div>
        			</div>
					<div style="display: flex;align-items: center;margin-top: 5.5rem;margin-left:1.575rem;" @click="goxieyi()" >
					 <img  v-if="codexieyi==true"  src="/assets/image/mobile/login/Frame 1000006895@2x.png" alt="" style="width: 1rem;height: 1rem;" />
					 <img  v-if="codexieyi==false" src="/assets/image/mobile/login/Frame 1000006718@2x.png" alt="" style="width: 1rem;height: 1rem;" />
        			 <div style="margin-left: .3125rem;font-size: .875rem;">我已阅读并同意 <a href="" style="color: #2E3033;margin-left:.1875rem;font-weight: bold;font-size: .875rem;">《AISEO注册&使用协议》</a></div>
        		 </div>	
        		</div>
				<div  v-if="codeType==3">
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/icon@2x.png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="font-size: 1.125rem;font-weight: bold;">手机号</div>
        						<div class="iphoneInputmiddle" style="">
        							<input type="text" style="border: none;" placeholder="请输入您的手机号" v-model="loginForm.phone"  @input="checkPhoneNumber"
									 @blur="
									   () => {
									     validatePhone();
									   }
									 "/>
        						</div>
        					</div>
        				</div>
        			</div>
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/codes.png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="display: flex;">
        						<div style="font-size: 1.125rem;font-weight: bold;">验证码</div>
        						<div></div>
        						</div>
        						<div class="iphoneInputmiddle" style="justify-content: space-between;">
        							<input type="text" style="border: none;width: 50%;" placeholder="请输入验证码" v-model="loginForm.code" />
        							<div style="color: #C8C9CC;font-size: .875rem;cursor: pointer;"  @click="getCode()">>{{codeyan}}<</div>
        						</div>
        					</div>
        				</div>
        			</div>
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/icon@2x (2).png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="display: flex;">
        						<div style="font-size: 1.125rem;font-weight: bold;">密码</div>
        						</div>
        						<div class="iphoneInputmiddle" style="justify-content: space-between;">
        							<input  :type="isPasswordVisible ? 'text' : 'password'"   style="border: none;width:60%;" placeholder="请输入密码" v-model="loginForm.password" />
        							<img src="/assets/image/mobile/login/icon@2x (3).png" alt="" style="width: 1.25rem;height:1.25rem;cursor: pointer;"    @click="togglePasswordVisibility()" />
        						</div>
        					</div>
        				</div>
        			</div>
        			<div style="margin-top: 2.5rem;">
        				<div style="height: 3.625rem;display: flex;">
        					<div style="width: 18%;">
        						<img src="/assets/image/mobile/login/icon@2x (2).png" alt="" style="width: 2rem;height:2rem ;" />
        					</div>
        					<div>
        						<div style="display: flex;">
        						<div style="font-size: 1.125rem;font-weight: bold;">确认密码</div>
        						</div>
        						<div class="iphoneInputmiddle" style="justify-content: space-between;">
        							<input  :type="isPasswordVisible2 ? 'text' : 'password'"   style="border: none;width: 60%;" placeholder="请确认密码" v-model="loginForm.surecode" />
        							<img src="/assets/image/mobile/login/icon@2x (3).png" alt="" style="width: 1.25rem;height:1.25rem;cursor: pointer;"   @click="togglePasswordVisibility2()"  />
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>	
				<div style="display: flex;justify-content: space-around;margin: 2.75rem 0 3.5rem 0;">
        			 <div></div>
        			 <div  @click="goLogin()"  >
						   <img v-show="phoneValid" :src="img1" alt=""  style=" width: 5rem;height: 2.875rem;object-fit: cover;" />
						   <img  v-show="!phoneValid" :src="img3" alt="" style="width: 5rem;height: 2.875rem;object-fit: cover;" />
					 </div>
        		 </div>
	</div>
</template>

<script setup>
import { code, login, getUsrInfo,ChangePassword } from "@/utils/api/customerService/index.ts";
import EventBus from "@/utils/eventBus.js";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import greyPhoneImageSrc from '/assets/image/mobile/login/BTN@2x.png'; // 导入灰色图片
import phoneImageBlack from '/assets/image/mobile/login/BTN@2x (1).png'; // 导入黑色图片
import { useStore } from "@/store/index";
const store = useStore();
const img3 = ref(greyPhoneImageSrc)
const img1 = ref(phoneImageBlack)
const router = useRouter();
const codeType = ref(1);
const loginForm = reactive({
	phone: "",
	password: "",
	surecode:"",
	code: ""
});
const codeTitle = ref("验证码登录");
const codeyan = ref("获取验证码");
const codexiu = ref("新号码登入时将自动为您完成注册.");
const Remember = ref(true);
let phonecode = ref(true)
const codexieyi = ref(true)
const phoneValid = ref(false);
if (process.client) {
	loginForm.password = localStorage.getItem("password");
	if (localStorage.getItem("password")) {
		Remember.value = false;
	}
}
const clickType = e => {
	codeType.value = e;
	loginForm.phone = "";
	  loginForm.surecode = "";
	if (!localStorage.getItem("password")) {
		loginForm.password = "";
	}
	loginForm.code = "";
	if (codeType.value == 2) {
		(codeTitle.value = "密码登录"),
			(codexiu.value = "若是新用户注册, 请使用验证码方式登入.");
	} else if (codeType.value == 1) {
		(codeTitle.value = "验证码登录"),
			(codexiu.value = "新号码登入时将自动为您完成注册.");
	}
};
const validatePhone = () => {
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (!phoneRegex.test(loginForm.phone)) {
		phonecode.value = false;
	} else {
		phonecode.value = true;
	}
};
let getCodeisWaiting = ref(false)
const getCode = (e) => {
	// 避免重复点击
	if (getCodeisWaiting.value) return;
	// 校验手机号码
	if (!(/^1[0-9]{10}$/.test(loginForm.phone))) {
		EventBus.emit("openToastBox", ["请填写正确的手机号"]);
		return false;
	}
	codeyan.value = '发送中'
	getCodeisWaiting.value = true;
	sendCode(loginForm.phone)
}
let Timer = (e) => { }
const sendCode = (e) => {
	code({
		mobile: e
	}).then((res) => {
		const resData = JSON.parse(res.data.value);
		if (resData.code == 200) {
			EventBus.emit("openToastBox", ["验证码发送成功！"]);
		} else {
			EventBus.emit("openToastBox", ["验证码发送太频繁！"]);
		}
	});
	setTimer();
}
const setTimer = (e) => {
	let holdTime = ref(59);
  	codeyan.value = "重新获取(60)";
	Timer = setInterval(() => {
		if (holdTime.value <= 0) {
			getCodeisWaiting.value = false;
			codeyan.value = "获取验证码"
			clearInterval(Timer);
			return;
		}
		codeyan.value = "重新获取(" + holdTime.value + ")"
		holdTime.value--;
	}, 1000)
}
const isPasswordVisible = ref(false);
const isPasswordVisible2 = ref(false);
const togglePasswordVisibility = () => {
	isPasswordVisible.value = !isPasswordVisible.value;
}
const togglePasswordVisibility2 = () => {
  isPasswordVisible2.value = !isPasswordVisible2.value;
};
const remberzhu = () => {
	Remember.value = !Remember.value
	if (Remember.value == false) {
		localStorage.setItem('password', loginForm.password)
	} else if (Remember.value == true) {
		localStorage.removeItem('password')
	}
};
let password = ref(true)
const validatepassword = () => {
	if (loginForm.password == '') {
		password.value = false;
	} else {
		password.value = true;
	}
};
const forgetthepassword = () => {
	codeType.value = 3
	if (codeType.value == 3) { codeTitle.value = '修改密码', codexiu.value = '在此页面修改或重置您的登录密码.' } else {
		codexiu.value = '新号码登入时将自动为您完成注册.'
	}
}
const goxieyi = () => {
	codexieyi.value = !codexieyi.value
}
const checkPhoneNumber = () => {
	const phoneRegex = /^\d{11}$/;
	phoneValid.value = phoneRegex.test(loginForm.phone);
};
const goback = () => {
	router.go(-1)
};
// 登录
const goLogin = (e) => {
	if (codexieyi.value == true && codeType.value != 3) {
		EventBus.emit("openToastBox", ['请勾选AISEO服务协议']);
		return;
	}
	if (loginForm.phone == '') {
		EventBus.emit("openToastBox", ['请输入手机号']);
		return;
	}
	if (codeType.value == 1 && loginForm.code == '') {
		EventBus.emit("openToastBox", ['请输入验证码']);
		return;
	}
	if (codeType.value == 2 && loginForm.password == '') {
		EventBus.emit("openToastBox", ['请输入密码']);
		return;
	}
	let data = {
		mobile: loginForm.phone,
	}
	if (codeType.value == 1) data.mobile_code = loginForm.code;
	if (codeType.value == 2) data.password = loginForm.password;
	if (codeType.value == 3){
		if (loginForm.password != loginForm.surecode ) {
			EventBus.emit("openToastBox", ['两次密码输入不一致']);
			return;
		}
		if(loginForm.code == '') return EventBus.emit("openToastBox", ['请输入验证码']);
		if(loginForm.password == '') return EventBus.emit("openToastBox", ['请输入密码']);
		if(loginForm.phone == '') return EventBus.emit("openToastBox", ['请输入手机号']);
		 data.password = loginForm.password;
		data.mobile_code = loginForm.code
         ChangePassword(data).then((res) => {
				const resData = JSON.parse(res.data.value);
        if(resData.code == 400){
           EventBus.emit("openToastBox", [resData.message])
        }else if(resData.code == 200){
            EventBus.emit("openToastBox", ['您已修改成功，请重新登录'])
            codeType.value = 2
        }
				console.log(resData,'的瓦杜好哇')
		 })

	};
	if(codeType.value!=3){
       	login(data).then((res) => {
		const resData = JSON.parse(res.data.value);
		if (resData.code == 200) {
			if (resData.result.token) {
				localStorage.setItem('aiseo-token-info', resData.result.token);
				EventBus.emit("openToastBox", ['登录成功']);
				router.push('/');
				// 获取用户信息
				getUsrInfo().then((res) => {
					const resData = JSON.parse(res.data.value);
					if (resData &&resData.code == 200) {
						store.setUserInfo(resData.result);
						localStorage.setItem('aiseo-user-info', JSON.stringify(resData.result));		
					}
				});
			}
		} else {
			EventBus.emit("openToastBox", [resData.message]);
		}
	});
	}
}
</script>

<style lang="scss" scoped>
.moblieLigin {
	background: url("/assets/image/mobile/login/img_login_bannerIMG@2x.png") no-repeat;
	background-size: cover;
	padding: 1.5rem;
	height: 33.75rem;


	.header {
		display: flex;
		justify-content: space-between;
		align-self: center;

		.imgright {
			width: 5.5rem;
			height: 1.375rem;
			object-fit: cover;
		}
	}

	.Slidermidele {
		display: flex;
		align-items: center;
		background: #e4e4e6;
		width: 7.5rem;
		height: 2.75rem;
		border-radius: 1.375rem;
		margin-top: 0.875rem;
	}

	.iphoneInputmiddle {
		font-size: 1rem;
		color: #47494D;
		height: 2rem;
		border-bottom: .0625rem solid #B3B3B3;
		width: 16.75rem;
		display: flex;
		margin-top: .625rem;
		align-items: center;
	}
}
</style>